<template>
	<el-row class="app-container">
		<el-col :span="20" style="height:100%">
			<platformInfo v-if="currentIndex == 0"></platformInfo>
			<baseConfig v-if="currentIndex == 1"></baseConfig>
			<platformAuth v-if="currentIndex == 2"></platformAuth>
			<deviceAuth v-if="currentIndex == 3"></deviceAuth>
		</el-col>
		<!-- 右边选项栏 -->
		<el-col :span="4" class="container-right">
			<ul class="platform-ul">
				<div style="text-align:center;margin-bottom:50px;">
					<i class="el-icon-search" style="font-size:150px"></i>
				</div>
				<li
					@click="switchPage(item, index)"
					v-for="(item, index) in tabs"
					:key="item.value"
					:class="{ color: currentIndex === index }"
				>
					{{ item.text }}
				</li>
			</ul>
		</el-col>
	</el-row>
</template>

<script>
import platformInfo from './components/playformInfo.vue'
import baseConfig from './components/baseConfig.vue'
import platformAuth from './components/platformAuth.vue'
import deviceAuth from './components/deviceAuth.vue'
export default {
	name: 'serveConfig',
	components: { platformInfo, baseConfig, platformAuth, deviceAuth },
	data() {
		return {
			tabs: [
				{
					text: '平台信息',
					value: 'platformInfo',
				},
				{
					text: '基础配置',
					value: 'baseConfig',
				},
				{
					text: '平台授权',
					value: 'platformAuth',
				},
				{
					text: '设备授权',
					value: 'deviceAuth',
				},
			],
			currentIndex: 0,
		}
	},

	created() {},
	methods: {
		// 切换
		switchPage(data, index) {
			this.currentIndex = index
		},
	},
}
</script>

<style lang="scss" scoped>
.app-container {
	height: 100%;
	padding: 0 10px;
}
.container-right {
	border-left: 1px solid rgb(124, 121, 121);
	height: 100%;
	.platform-ul {
		list-style: none;
		margin: 0;
		padding-left: 0;
		height: 100%;
		cursor: pointer;
		li {
			line-height: 70px;
			width: 100%;
			height: 70px;
			border-bottom: 1px solid #ccc;
			text-align: center;
		}
	}
	.color {
		color: #67c23a;
	}
}
</style>
